<template>
  <div class="drawer-main">
    <el-drawer
      ref="drawerMain"
      :title="$t('keyClasp.transferTitle')"
      :visible.sync="drawer"
      direction="rtl"
      size="35%"
      :wrapperClosable="false"
    >
      <div
        v-loading="loading"
        class="drawer-content"
      >
        <ele-form
          v-model="dialogfrom1"
          v-bind="formConfig1"
          ref="form1"
        >
        </ele-form>
        <p class="title-p">{{ $t('keyClasp.transferSubTitle1') }}</p>
        <ele-form
          v-model="dialogfrom2"
          v-bind="formConfig2"
          ref="form2"
        >
        </ele-form>
        <p class="title-p">{{ $t('keyClasp.transferSubTitle2') }}</p>
        <ele-form
          v-model="dialogfrom3"
          v-bind="formConfig3"
          ref="form3"
        >
        </ele-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="clearDialog()">{{
            $t("common.cancel")
          }}</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            @click="submitInfo()"
          >{{
            $t("common.submit")
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getAllList, infoTransfer } from '@/api/cabinet/keyClasp'
import { rowDetail } from '@/api/cabinet/keyClasp'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      setTimeout(() => {
        if (!checkStr(value, 'english-number')) {
          callback(new Error($i18n.t('mesProcess.rule8')))
        } else {
          callback()
        }
      }, 100)
    }
    const self = this
    return {
      drawer: false,
      loading: false,
      btnLoading: false,
      dialogfrom1: {
        uwbLongCode: null,
        vinCode: null,
        carInfo: null
      },
      formConfig1: {
        span: 24,
        isShowBackBtn: false,
        isShowSubmitBtn: false,
        rules: {
          boxTotal: [{ validator: validatePass, trigger: ['change', 'blur'] }]
        },
        formDesc: {
          uwbLongCode: {
            type: 'input',
            label: $i18n.t('keyClasp.UWBCode'),
            layout: 12,
            disabled: () => true
          },
          vinCode: {
            type: 'input',
            label: $i18n.t('keyClasp.VINCode'),
            layout: 12,
            disabled: () => true
          },
          carInfo: {
            type: 'input',
            label: $i18n.t('keyClasp.carSeries'),
            layout: 16,
            disabled: () => true
          }
        }
      },
      dialogfrom2: {
        id: null,
        keyCode: null,
        status: null,
        remark: null
      },
      formConfig2: {
        span: 24,
        isShowBackBtn: false,
        isShowSubmitBtn: false,
        rules: {
          boxTotal: [{ validator: validatePass, trigger: ['change', 'blur'] }]
        },
        formDesc: {
          keyCode: {
            type: 'input',
            label: $i18n.t('keyClasp.keyCode'),
            layout: 12,
            required: true,
            disabled: () => true
          },
          status: {
            type: 'input',
            label: $i18n.t('keyClasp.status'),
            layout: 12,
            disabled: () => true
          },
          remark: {
            type: 'textarea',
            label: $i18n.t('keyClasp.remark'),
            layout: 16,
            disabled: () => true
          }
        }
      },
      dialogfrom3: {
        id: null,
        keyCode: null,
        status: null,
        remark: null
      },
      formConfig3: {
        span: 24,
        isShowBackBtn: false,
        isShowSubmitBtn: false,
        rules: {
          // boxTotal: [{ validator: validatePass, trigger: ['change', 'blur'] }]
        },
        formDesc: {
          keyCode: {
            type: 'select',
            label: $i18n.t('keyClasp.keyCode'),
            layout: 12,
            required: true,
            prop: {
              value: 'id',
              text: 'keyCode'
            },
            options: async () => {
              const list = await getAllList({ status: 1, bindCar: 0 })
              this.keyClaspData = list.data.result
              return list.data.result
            },
            on: {
              change: val => {
                console.log(val)
                if (!val) {
                  self.$set(self.dialogfrom3, 'id', '')
                  self.$set(self.dialogfrom3, 'status', '')
                  self.$set(self.dialogfrom3, 'remark', '')
                } else {
                  let obj = self.keyClaspData.find(item => {
                    return item.id == val
                  })
                  self.$set(self.dialogfrom3, 'id', obj?.id)
                  self.$set(self.dialogfrom3, 'status', obj?.statusStr)
                  self.$set(self.dialogfrom3, 'remark', obj?.remark)
                }
              }
            }
          },
          status: {
            type: 'input',
            label: $i18n.t('keyClasp.status'),
            layout: 12,
            disabled: () => true
          },
          remark: {
            type: 'textarea',
            label: $i18n.t('keyClasp.remark'),
            layout: 16,
            // required: true,
            disabled: () => true
          }
        }
      }
    }
  },
  methods: {
    getCarInfo() {
      this.loading = true
      rowDetail(this.dialogfrom2.id)
        .then(res => {
          if (res.data.success) {
            this.dialogfrom1.carInfo = res.data.result.carInfo
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    async submitInfo() {
      try {
        // 你的异步操作
        await this.$refs.form3.validate()
      } catch (error) {
        // 处理错误
        console.error(error)
        return false
      }
      let params = {
        oldId: this.dialogfrom2.id,
        newId: this.dialogfrom3.id
      }
      this.btnLoading = true
      infoTransfer(params)
        .then(res => {
          this.drawer = false
          this.resetForm()
          this.$message.success($i18n.t('common.operateSuccess'))
          this.$emit('refresh')
        })
        .finally(() => {
          this.btnLoading = false
        })
    },
    clearDialog() {
      this.drawer = false
      this.resetForm()
    },
    resetForm() {
      this.dialogfrom3 = {
        id: null,
        keyCode: null,
        status: null,
        remark: null
      }
      this.$refs.form3.resetForm()
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-main {
  /deep/.el-drawer__body {
    padding: 0 10px;
  }
  /deep/ .ele-form-search {
    height: auto !important;
  }
  .title-p {
    padding-bottom: 16px;
  }
  .dialog-footer {
    padding-bottom: 16px;
  }
}
</style>